var linkList = $.ls.get('linkList');

$.Page({
    template: require('./entry.html'),
    assets: [require('./entry.less')],
    // api: '/index/links',
    data: {
        weather: {},
        linkList: linkList ? JSON.parse(linkList) : [],
        favorLinkList: [],
        opManager: {
            visible: {
                body: false,
                link: false
            },
            style: {
                top: 0,
                left: 0
            }
        },
        linkAdderShowing: $.ls.get('linkAdderShowing') === null ? true : $.ls.get('linkAdderShowing'),
        linkChosen: false,
        linkEditor: {},
        linkModalShowing: false
    },
    computed: {
    },
    created: function(){
        $.api({
            url: '/index/links'
        }).then(function(data){
            if(!linkList)this.linkList = data.linkList;
            this.favorLinkList = data.linkList;
        }.bind(this));
        this.getWeather();
        $.dom.on(document, 'click', function(e){
            this.showOption();
        }.bind(this));
    },
    methods: {
        getWeather: function(){
            $.http({
                url: 'http://weixin.jirengu.com/weather',
                responseType: 'json'
            }).then(function(res){
                var weather = this.weather = res.body.weather[0];
                weather.now.img = '//weixin.jirengu.com/images/weather/code/' + weather.now.code + '.png';
                // weather.future.forEach(function(wea){
                //     wea.img = '//weixin.jirengu.com/images/weather/code/' + Math.max(wea.code1, wea.code2) + '.png';
                // });
            }.bind(this));
        },
        favicon: function(link){
            link = $.url.parse(link);
            return link.protocol + '://' + link.host + '/favicon.ico';
        },
        deleteLink: function(index){
            this.linkList.splice(index, 1);
            $.ls.set('linkList', JSON.stringify(this.linkList));
        },
        editLink: function(newLink){
            if(newLink === false){
                this.linkChosen = false;
                this.linkEditor = {};
            } else {
                this.linkEditor = JSON.parse(JSON.stringify(this.linkChosen.link));
                if(!this.linkEditor.thumbnail){
                    Vue.set(this.linkEditor, 'thumbnail', this.favicon(this.linkEditor.link));
                }
            }
            this.linkModalShowing = true;
        },
        autoFillLink: function(){
            var url = this.linkEditor.link, title;
            if(!/^\w+\:\/\//.test(url))url = 'http://' + url;
            title = $.url.parse(url).host.split('.').slice(-2, -1)[0];
            if(!title)return;
            title[0] = title[0].toUpperCase();
            Vue.set(this.linkEditor, 'linkTitle', title);
            Vue.set(this.linkEditor, 'thumbnail', this.favicon(url));
        },
        saveLink: function(){
            if(!/^\w+\:\/\//.test(this.linkEditor.link))this.linkEditor.link = 'http://' + this.linkEditor.link;
            if(this.linkChosen){
                for(var key in this.linkEditor){
                    Vue.set(this.linkChosen.link, key, this.linkEditor[key]);
                }
            } else {
                this.linkList.push(this.linkEditor);
            }
            $.ls.set('linkList', JSON.stringify(this.linkList));
            this.linkModalShowing = false;
        },
        showOption: function(e, which, opt){
            for(var key in this.opManager.visible){
                this.opManager.visible[key] = false;
            }
            if(!e || this.linkModalShowing)return;
            this.opManager.visible[which] = true;
            e.preventDefault();
            switch(which){
                case 'link':
                    this.linkChosen = {
                        link: this.linkList[opt],
                        index: opt
                    };
                    break;
                default: break;
            }
            Vue.nextTick(function(){
                var x = e.pageX, y = e.pageY;
                var html = document.documentElement, vw = html.offsetWidth, vh = html.offsetHeight;
                var menu = this.$refs[which + 'OptionEl'], mw = menu.offsetWidth, mh = menu.offsetHeight;
                this.opManager.style = {
                    left: ((x + mw) > vw - 10 ? (vw - mw - 10) : x) + 'px',
                    top: ((y + mh) > vh - 10 ? (y - mh) : y) + 'px'
                };
            }.bind(this));
        },
        toggleLinkAdder: function(){
            this.linkAdderShowing = !this.linkAdderShowing;
            $.ls.set('linkAdderShowing', this.linkAdderShowing, 0);
        }
    }
});
